<template>
  <view
    class="menu-field"
    :class="className"
    hover-class="menu-field-hover"
    @tap="handleMenuClick"
  >
    <u-icon v-if="icon" :name="icon" size="56rpx" />
    <view v-else class="w-56rpx"></view>

    <text class="menu-title">{{ title }}</text>
    <u-icon name="arrow-right" size="28rpx" color="#ccc" />
  </view>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { handleMenuClick } from '@/utils/helper/menuHelper'

@Component({ name: 'MenuField' })
export default class MenuField extends Vue {
  @Prop({ type: String, default: '' }) menuKey!: string
  @Prop({ type: [String, Array], default: '' }) className!: string
  @Prop({ type: String, default: '' }) icon!: string
  @Prop({ type: String, required: true }) title!: string
  @Prop({ type: String, default: '' }) url!: string
  @Prop({ type: String, default: '' }) type!: MenuItem['type']
  @Prop({ type: Object, default: () => ({}) }) moreParams!: Recordable

  get itemData(): MenuItem {
    return {
      key: this.menuKey,
      icon: this.icon,
      title: this.title,
      url: this.url,
      type: this.type,
      moreParams: this.moreParams
    }
  }

  handleMenuClick() {
    this.$emit('click', this.itemData)
    return handleMenuClick(this.itemData)
  }
}
</script>

<style lang="scss" scoped>
.menu-field {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 16rpx $space-sm;
}

.menu-title {
  padding-left: 18rpx;
  flex: 1;
  ont-weight: 500;
  font-size: $font-size-lg;
  line-height: 42rpx;
  color: $color-first-text;
  vertical-align: middle;
}
</style>

<style lang="scss">
.menu-field-hover {
  background-color: $color-secondary;
}
</style>
